<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*使用 标签选择器  更改全部p标签的 样式*/
        p {
            background-color: pink;
        }

        /*更改 body 中的 所有的  后代 p 的样式 */
        /*后代选择器*/
        body p {
            background-color: green;
        }

        /*子选择器*/
        body > p {
            background-color: pink;
        }

        /*相邻兄弟选择器  只能向下 不能向上 */
        #p2 + p {
            background-color: black;
        }

        /*层次选择器 */
        body #p2 {
            background-color: yellow;
        }

        #p2 ~ p {
            background-color: blue;
        }

        /*更改全部的 li的样式*/
        body ul li {
            background-color: pink;
        }

        /*选择 li中的 第一个孩子*/
        ul li:first-child {
            background-color: blue;
        }

        /*选择 li中的 某一个孩子*/
        ul li:nth-child(2) {
            background-color: yellow;
        }

        /*选择 li中的 最后一个孩子*/
        ul li:last-child {
            background-color: green;
        }

        /*选择 任意一个p孩子
        */
        h1:nth-child(1) {
            background-color: red;

        }

        /*通过类型来选择*/
        h1:nth-of-type(1) {
            background-color: orange;
        }


    </style>

</head>

<body>

<h1>软件测试</h1>

<p>a</p>
<p id="p2">b</p>
<p>c</p>

<ul>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>

</body>
</html>